<template>
	<view class="">
		<cu-custom :bgColor="scrollTop>CustomBar?'var(--primaryBg)':''">
			<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
				我的
			</view>
		</cu-custom>
		<view class="bg"></view>
		<view class="box">
			<view class="img">
				<image :src="user.avatar" mode="aspectFill"></image>
			</view>
			<view class="box-content">
				<view class="name text-cut">
					{{user.realName || user.nickName || '--'}}
				</view>
				<view v-if="pet_team.teamId && pet_team.teamId != -1 && loginType=='MCH'" class="label">
					<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/fuwushang.png" mode=""></image>
					<view class="">
						{{pet_team.teamName || ''}}
					</view>
				</view>
			</view>
			<image @click='goUserPage("/packagesA/pages/my/setting/index")' class="box-set"
				src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/setting.png" mode=""></image>
		</view>
		<view class="card">
			<view class="card-title">
				宠物服务
			</view>
			<view class="card-identity" v-if="token">
				<image class="card-img" src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/zhu.png" mode=""></image>
				<view class="card-name">
					身份: {{loginType=='MCH'?'服务商':'宠物主'}}
				</view>
				<view style="width: 1rpx;height: 32rpx;background: #DDDDDD;margin: 0 20rpx;"></view>
				<view @click="handleSwitch" class="card-btn">切换</view>
			</view>
			<view v-if="loginType=='MCH'" class="card-list">
				<view v-for="(item,index) in merchantCard" :key="index" class="card-item" @click='emitPage(item.path)'>
					<view class="card-item-num">
						{{item.num}}
					</view>
					<view class="card-item-name">
						{{item.name}}
					</view>
				</view>
			</view>
			<view v-if="loginType=='CARGO'" class="card-list">
				<view v-for="(item,index) in userCard" :key="index" class="card-item" @click='toPage(item.path)'>
					<view class="card-item-num">
						{{item.num}}
					</view>
					<view class="card-item-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<switchDialog ref="switchDialog"></switchDialog>
		<loginModal ref="loginModal" @loginSuccess="loginSuccess"></loginModal>
	</view>
</template>

<script>
	import util from '@/common/util'
	import {
		getPetUserInfo,
		getPetData
	} from '@/api/pet/my/index'
	import switchDialog from "./switch.vue"
	export default {
		components: {
			switchDialog
		},
		data() {
			return {
				scrollTop: 0,
				CustomBar: this.CustomBar,
				card: [],
				userCard: [{
					num: 0,
					name: '宠物数量',
					path: '/pages/pet/masterPlat/index?path=petBuyer'
				}, {
					num: 0,
					name: '服务卡',
					path: '/pages/pet/masterPlat/index?path=petService&tabIndex=0'
				}, {
					num: 0,
					name: '服务需求',
					path: '/pages/pet/masterPlat/index?path=petService&tabIndex=2'
				}],
				merchantCard: [{
					num: 0,
					name: '我的服务',
					path: '/pages/pet/service/saler?tabIndex=1'
				}, {
					num: 0,
					name: '其他服务',
					path: '/pages/pet/service/saler?tabIndex=2'
				}, {
					num: 0,
					name: '宠物客户',
					path: '/pages/pet/client/index?type=CARGO'
				}, {
					num: 0,
					name: '服务客户',
					path: '/pages/pet/client/index?type=SERVICE'
				}, {
					num: 0,
					name: '宠物数量',
					path: '/pages/pet/index/saler?'
				}],
				user: {},
				token: undefined,
				pet_team: {},
				loginType: '',
			}
		},
		created() {
			this.token = uni.getStorageSync('token')
		},
		methods: {
			loginSuccess(){
				console.log(this.$getCompany)
				this.$getCompany().then(res=>{
					this.token = uni.getStorageSync('token')
					this.init()
				})
			},
			goUserPage(url) {
				if (!util.isLogin.call(this)) {
					return;
				}
				uni.navigateTo({
					url
				})
			},
			onScroll(e) {
				this.scrollTop = e.scrollTop
			},
			handleSwitch() {
				this.$refs.switchDialog.handleOpen({
					loginType: this.loginType,
					success: () => {
						this.loginType = this.loginType == 'MCH' ? 'CARGO' : 'MCH'
						uni.setStorageSync('loginType', this.loginType)
						uni.$emit('pet_change_loginType', this.loginType)
						this.getPetData()
					}
				})
			},
			init() {
				let token = this.token = uni.getStorageSync('token');
				// CARGO 用户端  MCH 服务端
				this.loginType = uni.getStorageSync('loginType') || 'CARGO';
				if (!token) {
					this.user = {}
					this.merchantCard[0].num = 0
					this.merchantCard[1].num = 0
					this.merchantCard[2].num = 0
					this.merchantCard[3].num = 0
					this.merchantCard[4].num = 0
					
					this.userCard[0].num =  0
					this.userCard[1].num =  0
					this.userCard[2].num =  0
					uni.stopPullDownRefresh();
					return
				}
				this.getPetTeam()
				this.getUserHome()
				this.getPetData()
				uni.stopPullDownRefresh()
			},
			getPetTeam() {
				this.pet_team = uni.getStorageSync('pet_team') || {}
			},
			async getUserHome() {
				this.user = await this.$getUserHome()
				uni.stopPullDownRefresh()
			},
			getPetData() {
				if (this.loginType == 'MCH' && this.pet_team.teamId == '-1') {
					this.merchantCard[0].num = 0
					this.merchantCard[1].num = 0
					this.merchantCard[2].num = 0
					this.merchantCard[3].num = 0
					this.merchantCard[4].num = 0
					return;
				}
				getPetData({
					teamId: this.pet_team.teamId,
					platType: this.loginType,
				}).then(res => {
					if (this.loginType == 'MCH') {
						this.merchantCard[0].num = res.serveNum || 0
						this.merchantCard[1].num = res.serveOtherNum || 0
						this.merchantCard[2].num = res.userNumByCargo || 0
						this.merchantCard[3].num = res.userNumByServe || 0
						this.merchantCard[4].num = res.cargoNum || 0
					} else {
						this.userCard[0].num = res.cargoNum || 0
						this.userCard[1].num = res.serveNum || 0
						this.userCard[2].num = res.demandNum || 0
					}

					uni.stopPullDownRefresh()
				})
			},
			toPage(url) {
				util.navigateTo({
					url
				})
			},
			emitPage(url) {
				let currentArr = url.split('?')
				var paramObj = {}
				var params = currentArr[1].split('=')
				paramObj[params[0]] = params[1]
				uni.$emit('handlePath', currentArr[0], paramObj)
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100%;
		height: 600rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(180deg, var(--primaryBg) 90%, rgba(255, 227, 89, 0) 100%);
		z-index: -1;
	}

	.box {
		width: 100%;
		margin: 40rpx 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;

		.img {
			width: 128rpx;
			height: 128rpx;
			border: 3rpx solid #FFFFFF;
			background: #fff;
			margin-right: 28rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.box-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			overflow: hidden;

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: var(--h1Color);
				line-height: 50rpx;
			}

			.label {
				background: var(--primaryBg);
				border-radius: 22rpx;
				padding: 0 12rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				width: max-content;
				margin-top: 10rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 8rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: var(--h1Color);
					line-height: 26rpx;
				}
			}
		}

		.box-set {
			width: 48rpx;
			height: 48rpx;
			margin-left: 10rpx;
		}
	}

	.card {
		width: 718rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin: 0 auto;

		.card-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--h1Color);
			line-height: 45rpx;
			padding: 28rpx 28rpx 16rpx;
		}

		.card-identity {
			height: 48rpx;
			background: #F8F8F8;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			width: max-content;
			margin-left: 28rpx;

			.card-img {
				width: 24rpx;
				height: 24rpx;
				margin: 0 8rpx 0 12rpx;
			}

			.card-name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: var(--h1Color);
				line-height: 40rpx;
			}

			.card-btn {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FF9002;
				line-height: 36rpx;
				margin-right: 20rpx;
			}
		}

		.card-list {
			padding: 16rpx 64rpx 48rpx;
			display: flex;
			flex-flow: row wrap;

			.card-item {
				width: 112rpx;
				margin: 64rpx 126rpx 0 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.card-item-num {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: var(--h1Color);
					line-height: 56rpx;
				}

				.card-item-name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: var(--h2Color);
					line-height: 40rpx;
					margin-top: 16rpx;
					text-align: center;
				}
			}
		}
	}
</style>